<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>charts</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
    <link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.14.2/dist/bootstrap-table.min.css">
  
    <link type="text/css" rel="stylesheet" href="../css/base.css"/>
    <link type="text/css" rel="stylesheet" href="../css/main.css"/>
    <link rel="stylesheet" href="../libs/swiper.min.css" >
    <script src="../libs/jquery-1.12.4.min.js"></script>
    <script src="../libs/swiper.min.js"></script>
    <script src="../libs/echarts-4.2.1.min.js"></script>
    <script src="../libs/china.js"></script>
    <script>window.utils = {}; // 全局变量</script>
    
</head>
<body>
    <div class="wrapper">
        <div class="header"></div>
        <div class="main word-metal">
            <!-- 左边 -->
            <div class="left m-item ">

                <div class="left-up-wrap">
                    <a class="go-back" href="https://baidu.com"></a>
                    <div class="left-up bright-border">
                        <div class="title">某省物能源消耗规模</div>
                        <div>
                            <span class="num">9.38</span>
                            <span class="intro">万亿</span>
                            <span class="intro">同比增长</span>
                            <span class="percent arrow-up">7.2%</span>
                        </div>
                    </div>
                </div>

                <div class="left-middle-wrap">
                    <div class="l-d-item-title">某省能源消耗情况饼图</div>
                    <div class="change-chart-wrap">
                        <div class="left-chart bright-border"></div>
                        <div class="table-wrap c-hide">
                            <div class="table-return">返回</div>
                            
                            <table
                            id="table"
                            data-toggle="table"
                            data-toolbar="#toolbar"
                            data-detail-view="true"
                            data-detail-formatter="detailFormatter"
                            >
                                <thead>
                                    <tr>
                                    <th data-field="id">单位名称</th>
                                    <th data-field="value">电力</th>
                                    <th data-field="handle">操作</th>
                                    </tr>
                                </thead>
                            </table>
                        </div>
                        <div class="move-column-chart-wrap c-hide">
                            <div class="move-chart-return">返回</div>
                            <div class="move-column-chart"></div>
                        </div>
                    </div>
                </div>
                

                <div class="left-down-wrap">
                    <div class="l-d-item-title">某省能源消耗情况</div>
                    <div class="left-down bright-border">
                        <div class="l-d-item">
                            <span class="word">能源统计小号量增长</span>
                            <span class="percent arrow-up">14.3%</span>
                        </div>
                        <div class="l-d-item">
                            <span class="word">能源统计小号量增长</span>
                            <span class="percent arrow-up">15.3%</span>
                        </div>
                        <div class="l-d-item">
                            <span class="word">能源统计小号量增长</span>
                            <span class="percent arrow-down">16.3%</span>
                        </div>
                    </div>
                </div>

            </div>
            <!-- 中间 -->
            <div class="middle m-item">
                <div class="china-chart"></div>
                <div class="bottom-chart-wrap">
                    <div class="title">全国能源消耗情况</div>
                    <div class="bottom-chart bright-border"></div>
                </div>
            </div>
            <!-- 右边 -->
            <div class="right m-item">
                <div class="nav-tab">
                    <div class="swiper-container">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide cur-slide" data-type="0" data-val="0">单位增加值能耗</div>
                            <div class="swiper-slide" data-type="0" data-val="1">水</div>
                            <div class="swiper-slide" data-type="0" data-val="2">单位增加值水耗</div>
                            <div class="swiper-slide" data-type="0" data-val="3">废水</div>
                            <div class="swiper-slide" data-type="0" data-val="4">废气</div>
                            <div class="swiper-slide" data-type="0" data-val="5">固废</div>
                            <div class="swiper-slide" data-type="1" data-val="6">考评</div>
                            <div class="swiper-slide" data-type="2" data-val="7">处罚</div>
                        </div>
                    </div>
                </div>
                <div class="right-up-chart-wrap">
                    <div class="title-up">全国环比分析图</div>
                    <div class="title title1">
                        <span class="word1">销售额</span><span class="num1">100</span><span class="word1 space">万吨</span>
                        <span class="word1">利润</span><span class="num2">100</span><span class="word1">亿元</span>
                    </div>
                    <div class="right-up-chart bright-border"></div>
                </div>
                <div class="right-up-chart-wrap">
                    <div class="title-up">全国同比分析图</div>
                    <div class="title title2">
                        <span class="word1">销售额</span><span class="num1">100</span><span class="word1 space">万吨</span>
                        <span class="word1">利润</span><span class="num2">100</span><span class="word1">亿元</span>
                    </div>
                    <div class="right-down-chart bright-border"></div>
                </div>

            </div>
        </div>
        <div class="footer"></div>
    </div> 
    <div class="load-wrap c-hide">
        <img src="../img/load.svg">
    </div>
    <script src="../js/chart_option/pieOption.js"></script>
    <script src="../js/chart_option/chinaOption.js"></script>
    <script src="../js/chart_option/horColumuOption.js"></script>
    <script src="../js/chart_option/verColumuOption.js"></script>
    <script src="../js/chart_option/lineOption.js"></script>
    <script src="../js/chart_option/moveColumuOption.js"></script>
    <script src="../js/chart_option/ratioPieOption.js"></script>
    <script src="../js/chart_option/rosePie.js"></script>
    <script src="../js/testData.js"></script>
    <script src="../js/index.js"></script>
    <script src="https://unpkg.com/bootstrap-table@1.14.2/dist/bootstrap-table.min.js"></script>

</body>
</html>